import { Component } from 'react';
import { connect } from 'react-redux';
import Taro from "@tarojs/taro";
import { View, Button } from '@tarojs/components'
import './user.less'
import {getUserInfo} from "../../../actions/user";
import Head from "../../../components/head/head";
import Panel from "../../../components/user/panel";

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

type PageStateProps = {
  user: {
    type: '',
    avatar_url: ""
    id: ""
    loginname: ""
    success: false
  },
}

type PageDispatchProps = {
  add: () => void
  dec: () => void
  asyncAdd: () => any
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps & PageState

interface User {
  props: IProps;
}

// @ts-ignore
@connect(({ user }) => ({
  user
}))
class User extends Component {
  state = {
    recent_topics: [],
    recent_replies: []
  };

  componentDidMount() {
    const {user: {loginname}} = this.props;
    getUserInfo({ loginname: loginname }).then(result => {
      this.setState({
        recent_topics: result.data.recent_topics,
        recent_replies: result.data.recent_replies
      })
    })
  }

  //发布话题 跳转到发布话题页面
  publishTopic() {
    Taro.redirectTo({ url: '/publish/pages/publish/publish' })
  }

  render() {
    // @ts-ignore
    const { loginname, avatar_url } = this.props;

    const { recent_topics, recent_replies } = this.state;

    return (
      <View>
        {
          // @ts-ignore
          <Head loginname={loginname} avatar_url={avatar_url} />
        }
        {
          // @ts-ignore
          <Panel listData={recent_topics} title='最近发布的话题' />
        }
        {
          // @ts-ignore
          <Panel listData={recent_replies} title='最近收到的回复' />
        }
        <Button
          className='publish_btn'
          onClick={()=>this.publishTopic()}
        >
          发布话题
        </Button>
      </View>
    )
  }
}

export default User

